<template>
  <q-layout view="lHh Lpr lFf">
    <q-header class="no-shadow bg-white">
      <layout-header v-if="$q.screen.gt.sm"></layout-header>
    </q-header>
    <q-footer v-if="$q.screen.lt.sm">
      <layout-footer></layout-footer>
    </q-footer>
    <q-page-container :class="{'bg-grey-1': $q.screen.gt.sm}" style="background-color: #ffffff">
      <router-view/>
      <!--<div class="row justify-center">-->
      <!--<div class="col-xl-8 col-lg-10 col-md-12 col-sm-12">-->
      <!--<router-view/>-->
      <!--</div>-->
      <!--</div>-->
      <div id="container-footer" v-if="$q.screen.gt.sm" class="size-14 bg-grey-9 q-py-xl row justify-center">
        <div class="col-xl-8 col-lg-10 col-md-12 col-sm-12 q-px-sm">
          <div class="row q-mb-md">
            <div class="col">
              <div v-if="$route.path === '/'" class="q-mb-md">
                <a href="http://www.maplet.org/" target="_blank">地图云集</a>
                <a href="https://www.ditushu.com/" target="_blank">地图书</a>
                <a href="http://amap.zju.edu.cn/" target="_blank">学术地图发布平台</a>
                <a href="https://www.17ditu.com/" target="_blank">一起看地图</a>
                <a href="http://www.guoxue123.com/" target="_blank">国学导航</a>
                <a href="https://sou-yun.com/" target="_blank">搜韵网</a>
                <a href="http://www.sdmzh.com.cn/" target="_blank">四大名著</a>
                <a href="http://www.xueshiboke.com/" target="_blank">学史博客</a>
                <a href="http://www.w3guo.com/" target="_blank">我们的三国</a>
                <a href="http://www.zhsan.com/" target="_blank">中华三国志</a>
                <a href="http://www.gugong.net/" target="_blank">故宫历史网</a>
                <!--<a href="http://hao.360.cn/" target="_blank">360导航</a>-->
                <!--<a href="http://www.hao123.com/" target="_blank">hao123</a>-->
                <!--<a href="http://123.sogou.com/" target="_blank">搜狗网址导航</a>-->
                <a href="http://www.02516.com/" target="_blank">我要乐网址导航</a>
                <!--<a href="http://hao.uc.cn" target="_blank">UC网址导航</a>-->
              </div>
              <div class="q-my-md text-grey-4">
                本站作品均由作者自主制作和分享，仅用于交流学习目的，本站仅提供制图工具和分享交流平台， 并不代表本站赞同其观点和对其真实性和版权负责，也不构成任何其他建议。 作者的原创地图未经授权不得转载地图和窃取数据。 如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时删除。
              </div>
              <div class="q-pb-sm">
                <a href="/about/">关于我们</a>
                <a target="_blank" href="http://tutorials.ageeye.cn/">制图教程</a>
                <a href="/help/">使用帮助</a>
                <a href="/donation/">提供捐助</a>
                <a target="_blank" href="https://zhuanlan.zhihu.com/ageeye">知乎专栏</a>
              </div>
            </div>
            <div class="row q-ml-md text-grey-4">
              <div class="q-mr-md">
                <img width="100px" src="/statics/weixin-qrcode.jpg"/>
                <div class="size-12">公众号：地图书</div>
              </div>
              <div>
                <img width="100px" src="/statics/weibo-qrcode.png"/>
                <div class="size-12">微博：发现中国网</div>
              </div>
            </div>
          </div>
          <div class="q-pt-md border-top-1">
            <a target="_blank" class="text-grey-6" href="http://www.miitbeian.gov.cn/">蜀ICP备12026271</a>
            <a target="_blank" class="text-grey-6" href=""><q-icon name="mail"/> dev@ageeye.cn</a>
            <a target="_blank" class="text-grey-6" href="https://www.ageeye.cn">Copyright © 2015-2018 发现中国</a>
          </div>
        </div>
      </div>
      <q-page-sticky position="right" :offset="[10, 0]" v-if="$q.screen.width > 1440 && $route.path !== '/'" class="row justify-end">
        <div style="width: 180px" class="column items-center q-pa-sm">
          <img src="/statics/weixin-qrcode.jpg" width="50%">
          <div class="size-12 text-grey-8 q-pt-sm">
            关注官方公众号“地图书”，每日分享文章、地图、网站、工具、书籍等人文地理资源。
          </div>
        </div>
      </q-page-sticky>
    </q-page-container>
    <q-page-scroller position="bottom-right" :scroll-offset="150" :offset="[18, 18]">
      <q-btn dense fab icon="keyboard_arrow_up" color="negative" />
    </q-page-scroller>
    <layout-letter :createdQuery="false"></layout-letter>
  </q-layout>
</template>

<script>
  import LayoutHeader from './header'
  import LayoutFooter from './footer'
  import LayoutLetter from './letter'

  export default {
    name: 'LayoutDefault',
    components: { LayoutHeader, LayoutFooter, LayoutLetter },
    data () {
      return {
      }
    },
    created () {
    },
    methods: {
    }
  }
</script>

<style lang="stylus">
  @import "~quasar/dist/quasar.styl"
  header
    /*border-bottom 2px solid #333*/
    .q-toolbar
      box-shadow 0 1px 3px #ddd
      @media screen and (max-width 575px)
        padding 0 5px !important

  #container-footer
    a
      color $grey-4
      margin-right 20px
</style>
